<template>
    <view class="container">
        <u-list
            @scrolltolower="scrolltolower"
        >
            <view
                class="list-item"
                v-for="(item, index) in noticeList"
                :key="index"
            >
                <u-image
                    src="https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/notice_logo.png"
                    shape="circle"
                    width="90rpx"
                    height="90rpx"
                ></u-image>
                <view class="info">
                    <u-text
                        :text="item.title"
                        size="28rpx"
                        color="#000000"
                        block
                    ></u-text>
                    <u-text
                        :text="item.desc"
                        size="28rpx"
                        color="#888888"
                        :lines="1"
                        block
                    ></u-text>
                    <view class="time">
                        <u-text
                            :text="item.timeAt"
                            size="28rpx"
                            color="#888888"
                            :lines="1"
                            block
                        ></u-text>
                    </view>
                </view>
            </view>
        </u-list>
    </view>
</template>
<script>
import { getNoticePage } from "@/config/api"
export default {
    data() {
        return {
            query: {
                page: 1,
                list_rows: 20
            },
            noticeList: [],
            total: 0
        }
    },
    onLoad() {
        this.getData()
    },
    methods: {
        scrolltolower() {
            if(this.total > this.noticeList.length) {

                this.getData()
            }
            console.log("到底啦~")
        },
        async getData() {
            const res = await getNoticePage(this.query)
            this.noticeList = res.items
            this.total = res.total
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        box-sizing: border-box;
        .list-item {
            padding: 0 20rpx;
            display: flex;
            margin-top: 45rpx;
            .info {
                flex: auto;
                margin-left: 20rpx;
                position: relative;
                padding-right: 135rpx;
                .time {
                    position: absolute;
                    right: 0;
                    bottom: 0;
                }
            }
        }
    }
</style>
